<!-- <template>
	<view class="container">
    <view class="rule" @click="$refs.popup.open()">活动规则</view>
    <view class="rule" style="top: 160rpx" @click="handleToMiddle">我的预约</view>
		<image class="container-header" src="../../static/images/背景.jpg" mode="widthFix"></image>
    <view class="container-main">
      <h1 class="main-title">免费预约</h1>
      <input maxlength="11" class="main-input" placeholder-style="color: #ccc;" type="text" placeholder="请输入手机号码" v-model.trim="screen.mobile">
      <view class="main-info">活动仅对<strong>广东联通、广东移动、广东电信手机号码用户开展</strong>，外省手机号码预约无效。</view>
      <input class="main-input" placeholder-style="color: #ccc;" type="text" placeholder="请输入手机品牌+型号" maxlength="100" v-model.trim="screen.phoneType">
      <view class="main-input box-flex" :style="{'color': (values.length>2?'#333':'#ccc'), justifyContent: 'space-between'}" @click="handleClickHall">{{values.length>2?values[0]+values[1]+values[2]:'请选择前往的营业厅'}} <uni-icons type="right" size="15" color="#ccc"></uni-icons></view>
      
      <view class="main-input box-flex" :style="{'color':(currentWeek==null?'#ccc':'#333'), justifyContent: 'space-between'}" @click="handleClickTime()">{{currentWeek===null?'请选择预约到厅时间':timeList[currentWeek].dateChinese+' '+timeList[currentWeek].week+' '+timeList[currentWeek].time[currentTime]}} <uni-icons type="right" size="15" color="#ccc"></uni-icons></view>
      
      <view class="main-input box-flex">
        <input maxlength="6" type="text" style="flex: 1;" placeholder-style="color: #ccc;" placeholder="请输入验证码" v-model.trim="screen.code">
        <image @click="handleChangeCode" class="input-code" :src="codeImg" mode="widthFix"></image>
      </view>
      <button class="main-button" :class="screen.mobile?'':'disabled'" @click="handleSubmit">马上预约</button>
    </view>
    
    <uni-popup ref="popup" type="center">
      <rule-modal @on-close="$refs.popup.close()"></rule-modal>
    </uni-popup>
    
    <uni-popup ref="warring" type="center">
      <view class="warring-popup">
        <image class="warring-close" @click="$refs.warring.close()" src="@/static/images/close.png" mode="widthFix"></image>
        <view class="warring-main">
          <h2>温馨提醒</h2>
          <h3>不能重复预约</h3>
          <image class="main-img" src="@/static/images/info.png" mode="widthFix"></image>
        </view>
      </view>
    </uni-popup>
    
    <adsense style="padding: 22rpx 32rpx;"></adsense>
    
    <uni-popup ref="hallPop" type="bottom">
      <view class="popup-main">
        <h2><span>请选择营业厅</span> <uni-icons style="font-weight: 400;" size="23" color="#ccc" type="close" @click="$refs.hallPop.close()"></uni-icons> </h2>
        <view class="hall-main">
          <cascader-select v-if="treeData.length" :list="treeData" v-model="values" @on-change="handleChangeHall"></cascader-select>
          <view class="var-empty" v-else>
            暂无数据
          </view>
        </view>
        <view class="main-button">
          <button @click="$refs.hallPop.close()">确认</button>
        </view>
      </view>
    </uni-popup>
    
		<uni-popup ref="timePop" type="bottom">
      <view class="popup-main">
        <h2><span>请选择贴膜时间</span> <uni-icons style="font-weight: 400;" size="23" color="#ccc" type="close" @click="$refs.timePop.close()"></uni-icons> </h2>
        <view class="time-main">
          <template v-if="timeList.length">
            <view class="main-week">
              <view class="week-item" :class="currentWeek == index?'active':''" v-for="(item,index) in timeList" :key="item.date" @click="currentWeek = index">{{item.dateChinese + ' '+ item.week}}</view>
            </view>
            <view class="main-list" v-if="currentWeek!=null">
              <view class="list-item" :class="currentTime == item?'active':''"  v-for="(item,index) in Object.keys(timeList[currentWeek].time)" :key="item" @click="currentTime = item">{{timeList[currentWeek].time[item]}}</view>
            </view>
          </template>
          <view class="var-empty" v-else>
            暂无数据
          </view>
        </view>
        <view class="main-button">
          <button @click="$refs.timePop.close()">确认</button>
        </view>
      </view>
    </uni-popup>
	</view>
</template> -->
<template>
  <view style="text-align: center; font-size: 40rpx; padding: 200rpx 100rpx;">
    <uni-icons type="notification-filled" color="red" size="60"></uni-icons>
    <view style="margin-top: 50rpx;">亲，活动太火爆啦，本期名额预约已满，请留意下期活动！</view>
    <br>
    <view style="margin-top: 20rpx; font-size: 34rpx;">预约成功的用户 <span style="margin-left: 20rpx; text-decoration: underline; color: blue;" @click="handleToMiddle()">点击查看预约</span></view>
  </view>
</template>

<script>
import adsense from '@/components/adsense.vue'
import cascaderSelect from "@/components/mayh-cascader/mayh-cascader.vue";
import ruleModal from '@/components/rules.vue'
import {throttle} from '@/utils/Tools.js'
import point from '@/network/point.js'
export default {
  components:{adsense,cascaderSelect,ruleModal},
  data() {
    return {
      screen:{},
      codeImg:'',
      values: [],
      treeData: [],
      timeList: [],
      currentHall:{},
      currentWeek:null,
      currentTime:'',
      showTxt:'请选择前往的营业厅',
      timer:'',
    }
  },
  onLoad() {
    return;
    this._getHallList()
    this._getTimeList()
    this._getCode()
    this.handleSubmit = throttle(this.handleSubmit,3000)
    this.timer = setInterval(_=>{
      if(getApp().globalData.ip){
        point({
          action_code:"910000000",//对照表填 必须传
          action_type:"enter",//对照表填 必须传
          source_url: "910000000", //对照表填 必须传
          present_url: "910000000",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "tmhd",
          },
          {
            k: "user_phone", //必须传
            v: "10010",
          },
          {
            k: "user_ip",  // 必须传
            v: getApp().globalData.ip,
          }],
        })
        clearInterval(this.timer)
      }
    },1000)
  },
  methods: {
    handleClickHall(){  ///  点击营业厅初始化数据
      this.$refs.hallPop.open()
      if(this.treeData.length && this.values.length ===0){
        this.values.push(...[this.treeData[0].value,this.treeData[0].sonList[0]?.value])
      }
    },
    handleChangeHall(e){ //   改变营业厅
      this.currentHall = e
    },
    handleClickTime(){  ///   点击预约时间
      this.$refs.timePop.open();
      if(this.timeList.length && !this.currentTime){
        this.currentWeek === null?this.currentWeek = 0:this.currentWeek = this.currentWeek
        this.currentTime = Object.keys(this.timeList[0].time)[0]
      }
    },
    async handleSubmit(){  ///  点击马上预约
      if(!this.screen.mobile) return;
      if(!(/^1[3456789]\d{9}$/.test(this.screen.mobile) && this.screen.mobile.replace(/\s*/gm,''))){
        this.$toast('请填写正确的手机号码')
        return
      }
      if(!this.screen.phoneType){
        this.$toast('请填写手机类型')
        return
      }
      if(this.values.length<3){
        this.$toast('请选择前往的营业厅')
        return
      }
      if(this.currentWeek == null){
        this.$toast('请选择预约到厅时间')
        return
      }
      const week = this.timeList[this.currentWeek].date
      if(!this.screen.code){
        this.$toast('请输入验证码')
        return
      }
      try{
        const data = Object.assign(this.screen,{
          name:this.currentHall[2].value,
          district:this.currentHall[1].value,
          address:this.currentHall[2].code,
          city:this.currentHall[0].value,
          appointmentDate:week,
          appointmentTime:this.currentTime
        })
        uni.showLoading({
          title:'加载中...'
        })
        const res = await this.$post('/screen/appointment',data,'1')
        point({
          action_code:"910000001",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          source_url: "910000000", //对照表填 必须传
          present_url: "910000000",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "tmhd",
          },
          {
            k: "user_phone", //必须传
            v: data.mobile,
          },
          {
            k: "user_ip",  // 必须传
            v: getApp().globalData.ip,
          }
        ]})
        if(res.code == 200){
          uni.showToast({
            title:'提交成功',
            icon:'success'
          })
          setTimeout(()=>{
            uni.navigateTo({
              url:'/pages/index/film-success?params='+JSON.stringify(res.data)
            })
          },1000)
        }else if(res.code == 1001 || res.code == 1002){
          this.$refs.warring.open();
          this._getCode()
        }else{
          uni.showToast({
            title:res.msg || '请求错误',
            icon:'none'
          })
          this._getCode()
        }
      }catch(e){
        uni.showToast({
          title:'参数错误',
          icon:'none'
        })
      }
    },
    handleChangeCode(){  ///   改变验证码
      uni.showLoading({
        title: '加载中...',
        mask: false
      });
      this._getCode()
      setTimeout(()=>{
        uni.hideLoading()
      },500)
    },
    handleToMiddle(){  ///  跳转中间页
      window.open('https://u.10010.cn/qAtxq')
    },
    /////        network
    async _getHallList(){  ///   获取营业厅列表
      const res = await this.$get('/dict/getInfo?type=SCREEN')
      this.treeData = res.data.dictList
    },
    async _getTimeList(){ //   获取时间列表
      const res = await this.$get('/dict/getAppointmentTime')
      this.timeList = res.data.appointmentTimeList
    },
    async _getCode(){  ///  获取二维码
      const res = await this.$get('/validate/getCaptchaBase64')
      if(res.code == 200) this.codeImg = res.data.url
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  .rule {
    position: absolute;
    right: 0;
    top: 80rpx;
    z-index: 2;
    background: rgba(0,0,0,.5);
    padding: 8rpx 15rpx;
    border-top-left-radius: 15rpx;
    border-bottom-left-radius: 15rpx;
    color: #fff;
    font-size: 26rpx;
  }
  &-header{
    width: 100%;
  } ///  .container-header end
  &-main{
    position: relative;
    margin: 0 31rpx;
    margin-top: -100rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 22rpx 32rpx;
    .main-title{
      font-size: 30rpx;
      color: #333;
      padding-left: 20rpx;
      position: relative;
      line-height: 1;
      margin-bottom: 48rpx;
      &::before{
        display: block;
        content: '';
        background: #e50125;
        width: 10rpx;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    
    .main-input{
      font-size: 28rpx;
      padding-bottom: 22rpx;
      margin-bottom: 26rpx;
      border-bottom: .5px solid #ccc;
      .input-code{
        width: 180rpx;
        max-height: 64rpx;
      }
    }
    
    .main-info{
      font-size: 21rpx;
      color: #222;
      line-height: 36rpx;
      margin-bottom: 48rpx;
      strong{
        color: #e60027;
        font-weight: 400;
      }
    }
    
    .main-button{
      background: #e60027;
      color: #fff;
      font-size: 36rpx;
      width: 100%;
      line-height: 100rpx;
      margin-top: 26rpx;
      border-radius: 50rpx;
      &.disabled{
        background: #f599a7;
      }
    }
  }   ///    .container-main end
  
  .popup-main{
    background: #fff;
    padding: 40rpx 20rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    h2{
      text-align: center;
      font-size: 36rpx;
      line-height: 1;
      margin-bottom: 35rpx;
      .uni-icons{
        float: right;
      }
      span{
        border-bottom: 8rpx solid #f00;
      }
    }
    
    .time-main{
      display: flex;
      .main-week{
        height: 600rpx;
        background: #f2f2f2;
        margin-right: 40rpx;
        font-size: 28rpx;
        overflow-y: auto;
        .week-item{
          line-height: 80rpx;
          padding: 0 28rpx;
          &.active{
            background: #fff;
            color: #e60027;
          }
        }
        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 0;
          /*高宽分别对应横竖滚动条的尺寸*/
          height: 1px;
        }

        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
          background: #c4c4c4;
        }
      }
      .main-list{
        flex: 1;
        margin-right: 37rpx;
        .list-item{
          line-height: 80rpx;
          border-radius: 10rpx;
          border: .5px solid #ccc;
          background: #fff;
          text-align: center;
          margin-bottom: 20rpx;
          &.active{
            border: .5px solid #e60027;
            background: #fdf3f4;
            color: #e60027;
          }
        }
      }
    }  ///  time-main end
    .main-button{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 35rpx;
      button{
        border: 1px solid #e60027;
        margin: 0;
        padding: 0;
        width: 100%;
        background: #e60027;
        color: #fff;
        font-size: 36rpx;
        line-height: 90rpx;
        border-radius: 50rpx;
      }
    }
  }
}
</style>
